import { Spacer } from '@/components/ui/spacer'
import { Grid } from '@/components/svgs'
import { SidebarItem } from './item'
import { ModeToggle } from '../dark-mode-toggle'
import AvatarDropdown from './avatar-dropdown'
import { IMAvatar } from '../avatar'
import { useCookieState } from 'ahooks'

/**
 * 位于屏幕最左侧的侧边栏
 */
export function Sidebar() {
  const [nickname] = useCookieState('nickname')
  return (
    <aside className='flex flex-col items-center h-full py-6 bg-secondary border-r border-border'>
      <AvatarDropdown>
        <IMAvatar
          showName={nickname}
          size={48}
          className='cursor-pointer hover:ring-4 transition-all duration-300 ease-out'
        />
      </AvatarDropdown>
      <Spacer className='h-2' />
      <span className='text-sm text-center font-medium w-20 overflow-hidden text-ellipsis'>
        {nickname}
      </span>
      <Spacer className='h-6' />
      <nav className='flex flex-col items-center space-y-4'>
        <SidebarItem to='/workbench' icon={<Grid />} label='工作台' />
      </nav>
      <Spacer className='flex-auto' />
      <ModeToggle />
    </aside>
  )
}
